<template>
  <!-- 评论列表容器 -->
  <div class="comments-container">
    <div class="header">
      <h2 class="title">CUSTOMER REVIEWS</h2>
      <button class="clear-btn" @click="clearHistory">CLEAR HISTORY</button>
    </div>
    <!-- 循环渲染每条评论 -->
    <div v-for="(comment, index) in comments" :key="index" class="comment-item">
      <!-- 使用 Ant Design 的评论组件 -->
      <a-comment>
        <!-- 评论内容区域 -->
        <template #content>
          <div class="comment-content">
            <!-- 评论主体内容 -->
            <div class="comment-main">
              <!-- 评分组件 -->
              <a-rate style="font-size: 18px;" v-model:value="comment.score" :disabled="disabled" />
              <!-- 评论文本 -->
              <p>{{ comment.content }}</p>
            </div>
            <!-- 评论操作区域（点赞/点踩） -->
            <div class="comment-actions">
              <!-- 点赞按钮 -->
              <span key="comment-basic-like">
                <a-tooltip title="Like">
                  <template v-if="comment.action === 'liked'">
                    <LikeFilled @click="handleLike(index)" />
                  </template>
                  <template v-else>
                    <LikeOutlined @click="handleLike(index)" />
                  </template>
                </a-tooltip>
                <!-- 点赞数 -->
                <span style="padding-left: 8px; cursor: auto">
                  {{ comment.like_count }}
                </span>
              </span>
              <!-- 点踩按钮 -->
              <!-- <span key="comment-basic-dislike">
                <a-tooltip title="Dislike">
                  <template v-if="comment.action === 'disliked'">
                    <DislikeFilled @click="handleDislike(index)" />
                  </template>
                  <template v-else>
                    <DislikeOutlined @click="handleDislike(index)" />
                  </template>
                </a-tooltip> -->
                <!-- 点踩数 -->
                <!-- <span style="padding-left: 8px; cursor: auto">
                  {{ comment.dislikes }}
                </span>
              </span> -->
            </div>
          </div>
        </template>
        <!-- 评论作者 -->
        <template #author>
          <a>{{ comment.user_name }}</a>
        </template>
        <!-- 评论者头像 -->
        <template #avatar>
          <a-avatar :src="comment.user_avatar" />
        </template>
        <!-- 评论时间 -->
        <!-- <template #datetime>
          <a-tooltip :title="formatDate(comment.update_time)">
            <span>{{ formatRelativeTime(comment.update_time) }}</span>
          </a-tooltip>
        </template> -->
      </a-comment>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 导入所需的库和组件
import dayjs from 'dayjs';
import { LikeFilled, LikeOutlined, DislikeFilled, DislikeOutlined } from '@ant-design/icons-vue';
import { ref, watch } from 'vue';
import relativeTime from 'dayjs/plugin/relativeTime';
// 扩展 dayjs 以支持相对时间
dayjs.extend(relativeTime);

/**
 * 评论项接口定义
 * @interface CommentItem
 * @property {number|string} [id] - 评论唯一标识
 * @property {string} author - 评论作者名称
 * @property {string} avatar - 评论作者头像URL
 * @property {string} content - 评论内容
 * @property {string|Date} datetime - 评论时间
 * @property {number} [rating] - 评分（1-5）
 * @property {number} [likes] - 点赞数
 * @property {number} [dislikes] - 点踩数
 * @property {'liked'|'disliked'|undefined} [action] - 当前用户的操作状态
 */
interface CommentItem {
  id?: number | string;
  author: string;
  avatar: string;
  content: string;
  datetime: string | Date;
  rating?: number;
  likes?: number;
  dislikes?: number;
  action?: 'liked' | 'disliked' | undefined;
}

/**
 * 组件属性接口定义
 * @interface Props
 * @property {CommentItem[]} comments - 评论数组
 * @property {boolean} [disabled] - 是否禁用交互
 */
interface Props {
  comments: CommentItem[];
  disabled?: boolean;
}

// 定义组件属性，设置默认值
const props = withDefaults(defineProps<Props>(), {
  comments: () => [],
  disabled: false
});

/**
 * 组件事件定义
 * @property {Function} update:rating - 更新评分事件，参数为评论索引和新评分
 * @property {Function} like - 点赞事件，参数为评论索引
 * @property {Function} dislike - 点踩事件，参数为评论索引
 */
const emit = defineEmits<{
  (e: 'update:rating', index: number, value: number): void;
  (e: 'like', index: number): void;
  (e: 'dislike', index: number): void;
}>();

/**
 * 处理点赞事件
 * @param {number} index - 评论索引
 */
const handleLike = (index: number) => {
  emit('like', index);
};

/**
 * 处理点踩事件
 * @param {number} index - 评论索引
 */
const handleDislike = (index: number) => {
  emit('dislike', index);
};

/**
 * 格式化日期为完整格式
 * @param {string|Date} date - 日期对象或字符串
 * @returns {string} 格式化后的日期字符串
 */
const formatDate = (date: string | Date) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
};

/**
 * 格式化日期为相对时间
 * @param {string|Date} date - 日期对象或字符串
 * @returns {string} 相对时间字符串，如"3小时前"
 */
const formatRelativeTime = (date: string | Date) => {
  return dayjs(date).fromNow();
};
</script>

<style lang="scss" scoped>
.comments-container {
  display: flex;
  flex-direction: column;
  gap: 20px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 2px;

    .title {
      font-size: 16px;
      font-weight: bold;
      letter-spacing: 0.5px;
      margin: 0;
    }

    .clear-btn {
      font-size: 12px;
      color: #000;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      text-decoration: underline;
      font-weight: bold;
    }
  }
}

.comment-item {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;

  &:last-child {
    border-bottom: none;
  }
}

.comment-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 50px;
}

.comment-main {
  flex: 1;

  .ant-rate {
    transform: translateY(-4px);
  }
}

.comment-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .comment-content {
    flex-direction: column;
    gap: 12px;
  }

  .comment-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

::v-deep(.ant-comment-inner) {
  padding: 0;
}
</style>
